<template>
	<view class="container">
		<view class="content">
			<view class="question" v-for="(item,index) in qusetionList" :key='index'>
				<view class="question_header">
					<view class="header_title">{{item.testQuestionName}}
						<!-- <text style="font-weight: 500;">({{item.type==0?'单选':'多选'}})</text> -->
						<text style="font-weight: 500;"> ({{ item.grade }}分)</text>
					</view>
				</view>
				<view class="question_option">
					<view :class="{option_item:true,active_option:items.id==items.active}"
						v-for="(items,indexs) in item.detailList" :key='indexs' @click="optionItem(items)">
						<view class="option_box">
							<image src="../../static/hook.png" mode=""></image>
						</view>
						<text>{{items.questionDetailName}}</text>
					</view>
				</view>
			</view>
			<view style="height: 180rpx;">

			</view>
		</view>
		<view class="submit_box">
			<view class="tips_box">
				得分达到 {{ questionType.totalScore }} 即可通过本次考核
			</view>
			<button type="default" @click="subQuestion" class="sub_btn">提交(次数上限{{questionType.limitCount}})</button>
		</view>
	</view>
</template>

<script>
	import { getQuestionList } from '@/api/public'
	import { saveQuestion } from '@/api/user'
	export default {
		data() {
			return {
				active: 0,
				type: '',
				qusetionList: [],
				questionType: {}
			}
		},
		onLoad() {
			this.type = this._route.query.type
			this.questionList()
		},
		methods: {
			questionList(){
				getQuestionList(this.type).then(res =>{
					this.questionType = res.data.questionType
					let list = res.data.list.map( item =>{
						item.type = 0
						item.detailList.map( items =>{
							items.active = ''
						})
						return item
					})
					this.qusetionList = list
					console.log(this.qusetionList)
				}).catch(err =>{})
			},
			getUserInfo(param) {

			},
			// 提交问卷
			subQuestion() {
				var activeQuestion = [] //问题选择列表
				// 循环判断active是否为空，单选和多选因为传参格式需要区分判断
				for (var i in this.qusetionList) {
					// 单选判断循环
					if (this.qusetionList[i].type == 0) {
						for (var j in this.qusetionList[i].detailList) {
							if (this.qusetionList[i].detailList[j].active != '') {
								activeQuestion.push({
									questionId: this.qusetionList[i].detailList[j].questionId,
									id: this.qusetionList[i].detailList[j].id,
								})
							}
						}
					} else {
						// 多选判断循环，选项ID以逗号拼接成字符串
						var optionArr = []
						for (var j in this.qusetionList[i].detailList) {
							if (this.qusetionList[i].detailList[j].active != '') {
								optionArr.push(this.qusetionList[i].detailList[j].id)
							}
						}
						// 统计选择的数据
						activeQuestion.push({
							questionId: this.qusetionList[i].id,
							id: optionArr.join(),
						})
					}
				}
				
				let formData = {
					typeId: this.type,
					questionArr: activeQuestion
				}
				if(activeQuestion.length > 0){
					this.SubmitForm(formData)
				}else{
					uni.showToast({
						title: '请先完成问卷调查再提交',
						icon: 'none',
						duration: 2000,
					})
					return
				}
			},
			
			SubmitForm(data){
				saveQuestion(data).then(res =>{
					console.log(res)
					let that = this
					if(res.data.isLimit == 'Y'){
						uni.showModal({
							title: '温馨提示',
							content: '您今日的提交次数已达到上限，请明日再来',
							success: function(res) {
								if (res.confirm) {
									that.$yrouter.back();
								} else if (res.cancel) {
									that.$yrouter.back();
								}
							}
						});
					}else{
						if(res.data.isPass == 'Y'){
							uni.showModal({
								title: '温馨提示',
								content: '恭喜通过本次考核，本次得分 ' + res.data.totalGrade + ' 分',
								success: function(res) {
									if (res.confirm) {
										that.$yrouter.back();
									} else if (res.cancel) {
										that.$yrouter.back();
									}
								}
							});
						}else{
							uni.showModal({
								title: '温馨提示',
								content: '很遗憾没能通过本次考核，本次得分 ' + res.data.totalGrade + ' 分，是否重新作答？',
								success: function(res) {
									if (res.confirm) {} else if (res.cancel) {
										that.$yrouter.back();
									}
								}
							});
						}
					}
				}).catch(err =>{})
			},
			// 选择及未选择样式切换
			optionItem(param) {
				// 根据每个字段的id作为唯一状态标识是否选中
				this.active = param.id
				for (var i in this.qusetionList) {
					// 单项选择
					if (this.qusetionList[i].type == 0) {
						if (this.qusetionList[i].id == param.questionId) {
							for (var j in this.qusetionList[i].detailList) {
								if (this.qusetionList[i].detailList[j].id == param.id && this.qusetionList[i].detailList[j]
									.active == '') {
									this.qusetionList[i].detailList[j].active = param.id
								} else {
									this.qusetionList[i].detailList[j].active = ''
								}
							}
						}
						// 多项选择
					} else if (this.qusetionList[i].type == 1) {
						for (var j in this.qusetionList[i].detailList) {
							if (this.qusetionList[i].detailList[j].id == param.id) {
								if (this.qusetionList[i].detailList[j].active == '') {
									this.qusetionList[i].detailList[j].active = param.id
								} else if (this.qusetionList[i].detailList[j].active != '') {
									this.qusetionList[i].detailList[j].active = ''
								}
							}
						}

					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.question {
		.question_header {
			// height: 90rpx;
			background-color: #f1f1f1;
			font-size: 34rpx;
			font-weight: 700;
			color: #333333;

			.header_title {
				margin-left: 37rpx;
				line-height: 60rpx;
			}
		}

		.question_option {
			width: 650rpx;
			margin-top: 7rpx;
			// background-color: #F0AD4E;
			display: flex;
			// justify-content: space-between;
			flex-wrap: wrap;
			margin: 0 auto;
			margin-bottom: 40rpx;

			.option_item {
				// width: 300rpx;
				margin-top: 34rpx;
				// background-color: #DD524D;
				font-size: 30rpx;
				margin-right: 30rpx;
				color: #666666;
				display: flex;
				align-items: center;

				.option_box {
					width: 35rpx;
					height: 35rpx;
					border: 1rpx solid #999999;
					border-radius: 5px;
					margin-right: 10rpx;
					// background-color: #FF852A;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
		}
	}

	.active_option {
		.option_box {
			background: linear-gradient(-30deg, #ff7029 0%, #faa307 100%);
			border: 1rpx solid #faa307 !important;
		}

		text {
			color: #ff7029;
		}
	}

	.submit_box {
		width: 750rpx;
		height: 200rpx;
		background-color: #F1F1F1;
		position: fixed;
		bottom: 0;
	}
	
	.tips_box{
		text-align: center;
		font-size: 28rpx;
		color: #ff7029;
	}
	.sub_btn {
		width: 690rpx;
		height: 88rpx;
		background: linear-gradient(-30deg, #dc4011 0%, #faa307 100%);
		border-radius: 44rpx;
		margin: 40rpx auto;
		font-size: 32rpx;
		font-weight: 700;
		color: #ffffff;
		text-align: center;
		line-height: 88rpx;
	}

	// 按钮原生会存在上下黑线，该属性去除
	button::after {
		border: none;
	}
</style>
